<template>
    <div>

        <header class="header">
            <div class="container">
                <h1 class="text-4xl">{{detail.title}}</h1>
                <p>{{detail.description}}</p>
                <router-link class="btn btn-outline btn-white mt-2" :to="{name:'career-select'}">重新选择职业方向</router-link>
            </div>


        </header>

        <main class="container">
            <skill-tree-view :skills="detail.skills" :career="detail.id"></skill-tree-view>
            <!--<template v-for="skill in detail.skills">-->
                <!--<router-link class="card my-4" :key="skill.id"-->
                             <!--:to="{name:'skill-course',query:{career:$route.params.career||detail.id},params:{skill:skill.id}}">-->
                    <!--<div class="relative">-->
                        <!--<span class="absolute top-0 right-0 text-sm">学习时长{{skill.learn_count}}</span>-->
                        <!--<div class="title">-->
                            <!--{{skill.title}}-->
                        <!--</div>-->
                        <!--<p class="text-grey">-->
                            <!--{{skill.description}}-->
                        <!--</p>-->
                    <!--</div>-->
                <!--</router-link>-->
            <!--</template>-->


        </main>
    </div>

</template>

<script>
    import SkillTreeView from '../components/SkillTreeView';
    export default {
        components:{SkillTreeView},
        data() {
            return {detail: {}}
        },
        computed: {},
        methods: {
            getCareerPromise() {

                if (this.$route.params.career) {
                    return axios.get('careers/' + this.$route.params.career)
                } else {
                    return axios.get('careers/current')
                }
            }, getCareer() {
                this.getCareerPromise().then((res) => {
                    this.detail = res.data.data;

                }).catch((err) => {
                    switch (err.response.status) {
                        case 404:
                            //未选择职业
                            this.$router.push({name: 'career-select'})
                    }
                })
            }
        },
        created() {
            this.getCareer();

        }
    }
</script>

<style scoped>

</style>